<template>
  <div class="main">
    <div style="
        width: 100%;
        height: 40px;
        background-color: #fff;
        margin-bottom: 20px;
        padding: 10px;
      ">
      当前模块:<span style="font-weight: bold">教育人员对在校寄宿生的教育与指导工作记录记录模块</span>
    </div>
    <div class="main-body">
      <div class="main-header float-left">
        <el-form :inline="true" :model="formInline" class="demo-form-inline" size="mini">
          <el-form-item label="学校：">
            <el-select v-model="formInline.xq" placeholder="请选择学校" @change="xq_listChange">
              <el-option v-for="item in xq_list" :key="item.newXqdm" :label="item.xqjc" :value="item.newXqdm">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="年级：">
            <el-select v-model="formInline.nj" placeholder="请选择年级" @change="nj_listChange">
              <el-option v-for="(item, index) in nj_list" :key="index" :label="item.MC" :value="item.NJ">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="班级：">
            <el-select v-model="formInline.bj" placeholder="请选择班级" @change="bj_listChange">
              <el-option v-for="(item, index) in bj_list" :key="index" :label="item.BJMC + '班'" :value="item.BJNO">
              </el-option>
            </el-select>
          </el-form-item>
          <!-- TODO -->
          <el-form-item label="学生姓名：">
            <!-- <el-input v-model="formInline.xm" clearable placeholder="请输入学生姓名"></el-input> -->
            <el-select v-model="formInline.xm" placeholder="请选择学生" @change="getOnGuardFacultyway">
              <el-option v-for="(item, index) in xm_list" :key="index" :label="item.XM" :value="item.STU_ID">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleClick" icon="el-icon-search">添加</el-button>
            <!-- <el-button type="primary" icon="el-icon-download">下载本区教职工表</el-button> -->
          </el-form-item>
        </el-form>
      </div>

      <el-dialog title="寄宿生辅导与家庭教育指导工作记录显示与修改窗口" :visible.sync="dialogDetails" width="1000px"
        :before-close="handleClose">
        <div style="padding-top: 6px" class="font-all" id="nbprint">
          <div style="
              height: 40px;
              background-color: #ffeded;
              color: #1c511c;
              font-size: 16px;
              display: flex;
              justify-content: center;
              align-items: center;
            ">
            在校寄宿学生辅导与家庭教育指导工作记录
          </div>

          <el-descriptions class="margin-top" :column="3" size="small" border>
            <el-descriptions-item label="学生姓名" :span="1">{{ headerLoadData.XM }}</el-descriptions-item>
            <el-descriptions-item label="现就读" :span="1">{{ headerLoadData.XQJC }}</el-descriptions-item>
            <el-descriptions-item label="年级班级" :span="1">
              <span v-if="headerLoadData.njmc">{{ headerLoadData.njmc + "(" + jssStuYdList.bj + "班)" }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="家庭类别" :span="2"></el-descriptions-item>
            <el-descriptions-item label="学生类别">{{ headerLoadData.xslb }}</el-descriptions-item>

            <el-descriptions-item label="工作日期">
              <el-date-picker v-model="headerLoadData.time" type="date" placeholder="选择日期"
                value-format="yyyy-MM-dd"></el-date-picker>
            </el-descriptions-item>
            <el-descriptions-item label="具体时间">
              <el-input v-model="headerLoadData.times"></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="监护人类别">
              <span v-if="jssStuYdList">{{ jssStuYdList.jhrlb }}</span>
            </el-descriptions-item>

            <el-descriptions-item label="工作类别">
              <el-select v-model="gzlb" placeholder="请选择" size="mini" style="width: 86%" @change="bjlbChange">
                <el-option v-for="item in lb_list" :key="item.DM" :label="item.MC" :value="item.DM">
                </el-option>
              </el-select>
            </el-descriptions-item>
            <el-descriptions-item label="工作类型" :span="2">
              <el-checkbox-group v-model="bjfs">
                <el-checkbox v-for="i in lx_list" :label="i.DM" :value="i.DM" :key="i.DM" @change="bjfsChange(i.DM)">{{
          i.MC }}</el-checkbox>
              </el-checkbox-group>
            </el-descriptions-item>

            <el-descriptions-item label="辅导人员" :span="3">
              <el-input v-model="bjry"></el-input>
            </el-descriptions-item>

            <el-descriptions-item label="辅导主要内容" :span="3">
              <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="jyqk">
              </el-input>
            </el-descriptions-item>
            <el-descriptions-item label="以后工作注意事项和建议" :span="3">
              <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="jtjyqk">
              </el-input>
            </el-descriptions-item>
          </el-descriptions>
        </div>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogDetails = false">取 消</el-button>
          <el-button type="primary" @click="pushAdd">确定提交修改</el-button>
        </span>
      </el-dialog>

      <div class="main-center float-left">
        <el-table :data="tableData" height="650" style="width: 100%; margin-top: 6px" :header-cell-style="{
          background: '#fafafa',
          color: '#000000e0',
          fontWeight: 600,
        }">
          <!-- <el-table-column type="index" label="序号" width="100"></el-table-column> -->
          <el-table-column prop="XM" label="姓名"></el-table-column>
          <el-table-column prop="XQJC" label="就读校区"></el-table-column>
          <el-table-column prop="NJMC" label="年级"></el-table-column>
          <el-table-column prop="BJ" label="班级"></el-table-column>
          <!-- <el-table-column prop="jhrMc" label="学生基本情况"></el-table-column> -->
          <!-- <el-table-column prop="jkztMc" label="家庭教育基本情况"></el-table-column> -->
          <!-- <el-table-column label="填报或修改" width="100">
            <template slot-scope="scope" style="z-index: -9999;">
              <el-button @click="handleClick(scope.row)" type="text" size="small"
                style="color: #ff4d4f;">编辑查看详情</el-button>
            </template>
</el-table-column> -->
          <el-table-column label="工作记录" width="300">
            <template slot-scope="scope">
              <div style="display: block;" v-for="(i, k) in scope.row.zhidao">
                <el-button @click="scopeClick(i)" type="text" size="small">学生相关辅导（{{ i.GaDate }}）</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <!-- <div class="footer-pagination">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="formInline.currentPage" :page-sizes="[10, 20, 30, 50, 100, 200, 300, 500]"
            :page-size="formInline.limit" layout="total, sizes, prev, pager, next, jumper" :total="formInline.total">
          </el-pagination>
        </div> -->
      </div>
    </div>
  </div>
</template>
<script>
import httplogin from "../../api/login";
export default {
  name: "Social",
  data() {
    return {
      printOption: {
        id: "nbprint", // 打印元素的id 不需要携带#号
        popTitle: "教职工基本信息登记表", // 页眉标题 默认浏览器标题 空字符串时显示undefined 使用html语言
      },
      tableData: [],
      formInline: {
        nj: "",
        xq: "",
        xm: "",
        currentPage: 1,
        limit: 10,
        total: 0,
      },
      tStuJtcyList: [
        {
          id: "",
          sfzjlx: "",
          sfzjh: "",
          stuId: "",
          cw: "",
          name: "",
          age: "",
          zy: "",
          xl: "",
          jjnl: "",
          gzdw: "",
          lxfs: "",
          operateTime: "",
          operator: "",
        },
        {
          id: "",
          sfzjlx: "",
          sfzjh: "",
          stuId: "",
          cw: "",
          name: "",
          age: "",
          zy: "",
          xl: "",
          jjnl: "",
          gzdw: "",
          lxfs: "",
          operateTime: "",
          operator: "",
        },
      ], //家庭信息

      dm_jhrlb: [], //监护人类别
      dm_xl: [], //学历信息
      jssStuYdList: {
        jkzt: "",
        jhrlb: "",
      },
      xxdwXqList: [],
      dm_jkzk: [],
      lb_list: [],
      lx_list: [],
      classList: [
        {
          id: "01",
          className: "01",
        },
      ],
      gzlb: "",
      jyqk: "",
      jtjyqk: "",
      bjry: '',
      bjfs: [],
      bjfss: [],
      headerLoadData: {
        time: "",
        jssStuJbqk: {
          jhrlbString: " ",
        },
      },

      xq_list: [],
      bj_list: [], //班级 options
      xl_list: [], //班级 options
      nj_list: [], //年级 options
      dialogDetails: false,
      JiaoZhiGongInfo: {},
      schoolList: [],
    };
  },
  mounted() {
    this.getschoolList();
  },
  methods: {
    bjfsChange() {
      let obj = []
      console.log(this.bjfs);
      for (let f = 0; f < this.bjfs.length; f++) {
        obj.push(this.bjfs[f] + '/')
      }

      this.bjfss = obj.join(' ')
      console.log(this.bjfss);

    },
    async pushAdd() {
      let jssSqVo = {
        stuId: this.headerLoadData.STU_ID,
        bjlb: this.gzlb,
        bjfs: this.bjfss,
        bjry: this.bjry,
        zynr: this.jyqk,
        zysxjy: this.jtjyqk,
        gadate: this.headerLoadData.time,
        gatime: this.headerLoadData.times,
      };
      let res = await httplogin.addJiaoYuZhidaoJilSaveOrUpdate(jssSqVo);
      if (res.data.code == 200) {
        this.$message({
          showClose: true,
          message: res.data.data.data,
          type: "success",
        });
      } else {
        this.$message({
          showClose: true,
          message: res.data.data.data,
          type: "warning",
        });
      }
      this.dialogDetails = false;
      this.getOnGuardFacultyway()
    },
    async xq_listChange(val) {
      let obj = {
        xqdm: val,
      };
      let res = await httplogin.getJiaoYuZhidaoJilvFilterNj(obj);
      if (res.data.code == 200) {
        this.nj_list = res.data.data.data;
        if (res.data.data.data.length > 0) {
          this.formInline.nj = res.data.data.data[0].NJ;
          this.nj_listChange(this.formInline.nj);
        }
      }
    },
    async nj_listChange(val) {
      let obj = {
        xqdm: this.formInline.xq,
        nj: val,
      };
      let res = await httplogin.getJiaoYuZhidaoJilvFilterBj(obj);
      if (res.data.code == 200) {
        this.bj_list = res.data.data.data;
        if (res.data.data.data.length > 0) {
          this.formInline.bj = res.data.data.data[0].BJNO;
          this.bj_listChange(this.formInline.bj);
        }
      }
    },
    async bj_listChange(val) {
      let obj = {
        xqdm: this.formInline.xq,
        nj: this.formInline.nj,
        bj: val,
      };
      let res = await httplogin.getJiaoYuZhidaoJilvFilterStu(obj);
      if (res.data.code == 200) {
        this.xm_list = res.data.data.data;
        if (res.data.data.data.length > 0) {
          this.formInline.xm = res.data.data.data[0].STU_ID || "";
          this.getOnGuardFacultyway()
        }
      }
    },
    async getOnGuardFacultyway() {
      console.log(this.formInline);
      let obj = {
        pageNum: this.formInline.currentPage,
        pageSize: this.formInline.limit,
        nj: this.formInline.nj,
        newXqdm: this.formInline.xq,
        stuId: this.formInline.xm,
        bj: this.formInline.bj,
      };
      let res = await httplogin.getJiaoYuZhidaoJilv(obj);
      console.log(res.data);
      const { data, xq, nj, count, bj } = res.data.data;
      if (res.data.code == 200) {
        this.tableData = data;
        // this.formInline.total = count;
      }
    },
    async getschoolList() {
      let res = await httplogin.getJiaoYuZhidaoJilvFilterXqdm();
      if (res.data.code == 200) {
        this.xq_list = res.data.data.data;
        if (res.data.data.data.length > 0) {
          this.formInline.xq = res.data.data.data[0].newXqdm;
          this.xq_listChange(this.formInline.xq);
        }
      }
    },
    async bjlbChange(gzlb) {
      let obj = {
        gzlb: gzlb,
      };
      let res = await httplogin.getJiaoYuZhidaoJilSaveLoad(obj);
      if (res.data.code == 200) {
        const { gzLb, gzlx } = res.data.data.data;
        this.lx_list = gzlx;
      }
    },

    async getJiaoYuZhidaoJilSaveLoad() {
      let res = await httplogin.getJiaoYuZhidaoJilSaveLoad();
      if (res.data.code == 200) {
        const { gzLb, gzlx } = res.data.data.data;
        this.lb_list = gzLb;
        this.gzlb = this.lb_list[0].DM;
        this.bjlbChange(this.gzlb);
      }
    },

    getNowTimeDate() {
      const now = new Date();
      const year = now.getFullYear();
      const month = ("0" + (now.getMonth() + 1)).slice(-2);
      const day = ("0" + now.getDate()).slice(-2);
      // const hours = ('0' + now.getHours()).slice(-2);
      // const minutes = ('0' + now.getMinutes()).slice(-2);
      // const seconds = ('0' + now.getSeconds()).slice(-2);
      const formattedTime = year + "-" + month + "-" + day;
      return formattedTime;
    },
    getNowTime() {
      var now = new Date();
      var year = now.getFullYear(); //得到年份
      var month = now.getMonth(); //得到月份
      var date = now.getDate(); //得到日期
      month = month + 1;
      month = month.toString().padStart(2, "0");
      date = date.toString().padStart(2, "0");
      var defaultDate = `${year}-${month}-${date}`;
      return defaultDate;
    },
    sortPingyinfun(list) {
      list.sort((a, b) => a.XQJC.localeCompare(b.XQJC));
      return list;
    },
    //点击查看详情 open 弹框
    handleClick(row) {
      this.getJiaoYuZhidaoJilSaveLoad();
      this.getJssSqEditLoad(this.formInline.xm);
      this.dialogDetails = true;
    },
    async getJssSqEditLoad(val) {
      // console.log(this.formInline)
      let obj = {
        stuId: val,
      };
      let res = await httplogin.getJssSqEditLoad(obj);
      const {
        dm_jkzk,
        headerLoadData,
        tStuJtcyList,
        xxdwXqList,
        dm_jhrlb,
        dm_xl,
        jssStuYdList,
      } = res.data.data.data;
      if (res.data.code == 200) {
        this.headerLoadData = headerLoadData[0] || {};
        this.jssStuYdList = jssStuYdList[0] || {};
        this.dm_jhrlb = dm_jhrlb;

        this.headerLoadData.time = this.getNowTime();
        for (let j = 0; j < this.dm_jhrlb.length; j++) {
          if (this.dm_jhrlb[j].DM === this.jssStuYdList.jhrlb) {
            this.jssStuYdList.jhrlb = dm_jhrlb[j].MC;
          }
        }
      }
    },
    //close 弹框
    handleClose() {
      this.dialogDetails = false;
    },
    onSubmit() {
      this.getOnGuardFacultyway();
    },
    handleSizeChange(val) {
      this.formInline.limit = val;
      this.getOnGuardFacultyway();
    },
    handleCurrentChange(val) {
      this.formInline.currentPage = val;
      this.getOnGuardFacultyway();
    },
  },
};
</script>

<style scoped>
.width_100 {
  width: 100%;
}

.main {
  width: 100%;
  float: left;
  height: auto;
  box-sizing: border-box;
  padding: 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: #f6f6f6;
  overflow-x: auto;
  overflow-y: auto;
}

.main-body {
  width: 100%;
  height: auto;
  float: left;
  background-color: #fff;
  box-sizing: border-box;
  padding: 18px;
  border-radius: 12px;
}

.float-left {
  width: 100%;
  height: auto;
  float: left;
}

.main-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 8px;
}

.d-flex {
  display: flex;
  align-items: center;
}

.mr-24 {
  margin-right: 24px;
}

.fontcolor {
  color: rgba(0, 0, 0, 0.88);
  word-break: break-word;
  line-height: 1.5714285714285714;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 14px;
  box-sizing: border-box;
}

.footer-pagination {
  padding: 10px 0 0 0;
  text-align: right;
}

.font-all {
  color: rgba(0, 0, 0, 0.88);
  font-size: 14px;
  line-height: 1.5714285714285714;
  list-style: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  scrollbar-color: rgba(0, 0, 0, 0.25) rgba(5, 5, 5, 0.06);
}
</style>

<style scoped>
::v-deep .el-dialog {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 44%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: calc(100% - 30px);
  max-width: calc(100% - 30px);
}

::v-deep .el-dialog .el-dialog__body {
  flex: 1;
  overflow: auto;
}

::v-deep .el-dialog__header {
  background-color: #ff4d4f !important;
}

::v-deep .el-dialog__title {
  line-height: 24px;
  font-size: 20px;
  color: #fff !important;
  /* font-weight: 600; */
}
</style>